<template>
	<view>
		<view class="order-state">
			<!-- <text>订单配送中...</text> -->
			<!-- <text>订单已送达</text> -->
			<text>点击查看物流 ></text>
		</view>
		<view class="details-mei">
			<view class="detail-font">
				订单详情
			</view>
			<view class="fle" :style="[{'height': height},{'overflow': type}]">
				<view class="detail-pocket"  v-for="item in orderDetailList.pocketVo":key="item">
					<view class="detail-pocket-num">
						口袋1
					</view>
					<view class="pocket-money">
						打包费￥1
					</view>
					<!-- v-for="item in 4" -->
					<view class="pocket-order" >
						<view class=" pocket-order-detail" v-for="list in item.pocketGoodsVo" :key="list">
							<image src="../../static/Frame 25.png" mode=""></image>
							<view class="pocket-order-detail-name">
								{{list.goodsName}}
							</view>
							<view class="pocket-order-detail-price">
								{{list.weight}}
							</view>
							<view class="pocket-order-detail-num">
								{{list.num}}
							</view>
							<view class="pocket-order-detail-money">
								￥{{list.price}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="btn" @click="down" :style="{'top': height2}" v-if="open">展开全部卤味↓</view>
			<view class="btn" @click="up" :style="{'top': height2}" v-else>收起↑</view>
		
		</view>
		
		
		<view class="datail-buttom">
			<view class="datail-buttom-frame">
			</view>
		
			<view class="datail-buttom-pack">
				<view class="datail-buttom-pack-font">
					打包费
				</view>
				<view class="datail-buttom-pack-num">
					￥2.7
				</view>
			</view>
			<view class="datail-buttom-delivery">
				<view class="datail-buttom-delivery-font">
					配送费
				</view>
				<view class="datail-buttom-delivery-num">
					￥2.7
				</view>
			</view>
			<view class="datail-buttom-packet">
				<view class="datail-buttom-packet-list" v-for="item in 2" :key="item">
					<view class="packet-num">
						口袋1
					</view>
					<view class="datail-buttom-packet-money">
						￥1000.0
					</view>
				</view>
			</view>
			<view class="datail-buttom-total">
				<view class="datail-buttom-total-font">
					合计
				</view>
				<view class="datail-buttom-total-num">
					￥{{orderDetailList.allPrices}}
				</view>
			</view>
		
		
		
		</view>
		
		<view class="contact">
			<view class="contact-online">
				<view class="contact-online-img">
					<image src="../../static/information.png" mode=""></image>
				</view>
				<view class="contact-online-font">
					在线联系
				</view>
			</view>
			<view class="contact-merchants">
				<view class="contact-merchants-img">
					<image src="../../static/phone.png" mode=""></image>
				</view>
				<view class="contact-merchants-font">
					致电商家
				</view>
			</view>
		</view>
	
		<view class="order-information">
			<view class="order-information-font">
				订单信息
			</view>
			<view class="order-information-detail">
				<view class="order-information-detail-kuang">
					<view class="order-information-detail-font">
						订单类型
					</view>
					<view class="order-information-detail-state">
						{{orderDetailList.orderType}}
					</view>
				</view>
				<view class="order-information-detail-kuang">
					<view class="order-information-detail-font">
						配送地址
					</view>
					<view class="order-information-detail-state">
						{{orderDetailList.address[0].address}}
					</view>
				</view>
				<view class="order-information-detail-kuang">
					<view class="order-information-detail-font">
						下单时间
					</view>
					<view class="order-information-detail-state">
						{{orderDetailList.orderTime}}
					</view>
				</view>
				<view class="order-information-detail-kuang">
					<view class="order-information-detail-font">
						订单号码
					</view>
					<view class="order-information-detail-state">
						{{orderDetailList.orderNumber}}
					</view>
				</view>
				<view class="order-information-detail-kuang">
					<view class="order-information-detail-font">
						支付方式
					</view>
					<view class="order-information-detail-state">
						{{orderDetailList.paymentMethod}}
					</view>
				</view>
				<view class="order-information-detail-kuang">
					<view class="order-information-detail-font">
						订单备注
					</view>
					<view class="order-information-detail-state">
						{{orderDetailList.oderRemarks}}
					</view>
				</view>
			</view>
		</view>
	
		<view class="btntwo" @tap="goApplyForRefund(orderDetailList.orderId)">
			申请退款
		</view>
	
	</view>
</template>

<script>
	import {getOrderDetail} from "@/api/home.js"
	export default {
		onLoad(option) {
			
			// console.log(option);
			this.orderId = Number(option.id) 
			this.getOrderDetail( Number(option.id))
			},
		data() {
			return {
				open: true,
				height: "180rpx",
				height2: "240rpx",
				type: 'hidden',
				orderDetailList:[],
				orderDetailListPack:[],
				orderId:'',
				
			}
		},
		methods: {
			//查询订单详情
			
			getOrderDetail(e){
				// var YesOrderId =  uni.getStorage("YesOrderId")
				// var NoOrderId = uni.getStorage("NoOrderId")
				// YesOrderId.
				// console.log("YesOrderId",YesOrderId);
				// console.log("NoOrderId",NoOrderId);
				getOrderDetail(e).then(res=>{
					console.log("PPPPPP",res);
					this.orderDetailList = res.data.rows
					var a = []
					this.orderDetailList.pocketVo.map(item=>{
						a = [...a,...item.pocketGoodsVo]
						console.log("口袋",a);
					})
					this.orderDetailListPack = a
				})
			},
			//去申请退款
			goApplyForRefund(orderId){
				uni.navigateTo({
					url:"/pages/ApplyForRefund/ApplyForRefund?orderId="+orderId
				})
			},
			//收缩
			down() {
				this.open = false
				this.height = "500rpx";
				this.height2 = "560rpx";
				this.type = "auto"
			},
			up() {
				this.open = true
				this.height = "180rpx";
				this.height2 = "240rpx";
				this.type = "hidden"
			},
		}
	}
</script>

<style lang="scss" scoped>
	.order-state{
		width: 750rpx;
		height: 84rpx;
		background: #FB7A42;
		text{
			
			height: 84rpx;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 500;
			font-size: 36rpx;
			line-height: 84rpx;
			color: #FFFFFF;
			margin-left: 30rpx;
		}
	}
	
	.details-mei {
		width: 702rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin-top: 24rpx;
		margin-left: 24rpx;
		flex-direction: column;
		display: flex;
		position: relative;
	
		.detail-font {
			width: 112rpx;
			height: 28rpx;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 1000;
			font-size: 28rpx;
			line-height: 28rpx;
			color: #000000;
			margin-top: 24rpx;
			margin-left: 24rpx;
		}
	
		.detail-pocket {
			// height: 30rpx;
			width: 702rpx;
			display: flex;
	
			.detail-pocket-num {
				width: 114rpx;
				height: 24rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 24rpx;
				line-height: 24rpx;
				text-align: center;
				color: #FA8C16;
				margin-top: 24rpx;
			}
	
			.pocket-money {
				width: 150rpx;
				height: 24rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 24rpx;
				line-height: 24rpx;
				text-align: center;
				color: #8C8C8C;
				margin-top: 24rpx;
	
			}
	
			.pocket-order {
				width: 702rpx;
				margin-top: 70rpx;
				margin-left: -225rpx;
	
				.pocket-order-detail {
					display: flex;
					width: 702rpx;
					height: 96rpx;
					// background-color: #FA8C16;
					margin-top: 24rpx;
					justify-content: space-between;
					image{
						width: 96rpx;
						height: 96rpx;
						border-radius: 4px;
					}
	
					.pocket-order-detail-name {
						// width: 112rpx;
						height: 96rpx;
						font-family: 'PingFang SC';
						font-style: normal;
						font-weight: 400;
						font-size: 28rpx;
						line-height: 96rpx;
						text-align: center;
						color: #000000;
						// margin-left: 18rpx;
					}
	
					.pocket-order-detail-price {
						// width: 96rpx;
						height: 96rpx;
						font-family: 'PingFang SC';
						font-style: normal;
						font-weight: 400;
						font-size: 28rpx;
						line-height: 96rpx;
						text-align: center;
						color: #8C8C8C;
						// margin-left: 150rpx;
					}
	
					.pocket-order-detail-num {
						// width: 32rpx;
						height: 96rpx;
						font-family: 'PingFang SC';
						font-style: normal;
						font-weight: 400;
						font-size: 28rpx;
						line-height: 96rpx;
						text-align: center;
						color: #8C8C8C;
						// margin-left: -50rpx;
					}
	
					.pocket-order-detail-money {
						// width: 100rpx;
						height: 96rpx;
						font-family: 'PingFang SC';
						font-style: normal;
						font-weight: 400;
						font-size: 28rpx;
						line-height: 96rpx;
						text-align: center;
						color: #000000;
						// margin-left: 120rpx;
					}
				}
			}
	
		}
	}
	
	.btn {
		transition: 2s;
		position: absolute;
		left: 50%;
		transform: translate(-50%, 0);
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 24rpx;
		line-height: 24rpx;
		text-align: center;
		color: #8C8C8C;
	}
	
	.fle {
		transition: 0.3s;
	}
	
	.datail-buttom {
		display: flex;
		display: column;
		width: 702rpx;
		// height: 400rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		// margin-top: 24rpx;
		margin-left: 24rpx;
	
		.datail-buttom-frame {
			width: 660rpx;
			height: 0;
			margin-top: 50rpx;
			margin-left: 24rpx;
			border: 0.5rpx solid #8C8C8C;
			opacity: 0.3;
		}
	
		.datail-buttom-pack {
			width: 702rpx;
			height: 24rpx;
			// background-color: #FA8C16;
			margin-top: 80rpx;
			margin-left: -650rpx;
			display: flex;
	
			.datail-buttom-pack-font {
				width: 90rpx;
				height: 24rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 24rpx;
				line-height: 24rpx;
				color: #121B36;
			}
	
			.datail-buttom-pack-num {
				width: 90rpx;
				height: 24rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 24rpx;
				line-height: 24rpx;
				text-align: right;
				color: #121B36;
				margin-left: 450rpx;
			}
		}
	
		.datail-buttom-delivery {
			width: 702rpx;
			height: 24rpx;
			margin-top: 130rpx;
			margin-left: -700rpx;
			display: flex;
	
			.datail-buttom-delivery-font {
				width: 90rpx;
				height: 24rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 24rpx;
				line-height: 24rpx;
				color: #121B36;
				margin-left: 10rpx;
			}
	
			.datail-buttom-delivery-num {
				width: 90rpx;
				height: 24rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 24rpx;
				line-height: 24rpx;
				text-align: right;
				color: #121B36;
				margin-left: 450rpx;
			}
		}
	
		.datail-buttom-packet {
			width: 702rpx;
			// height: 128rpx;
			// background: #753eff;
			margin-top: 200rpx;
			margin-left: -700rpx;
	
			.datail-buttom-packet-list {
				width: 702rem;
				height: 24rpx;
				// background-color: #FA8C16;
				margin-top: 24rpx;
	
				.packet-num {
					width: 80rpx;
					height: 24rpx;
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 400;
					font-size: 24rpx;
					line-height: 24rpx;
					text-align: right;
					color: #8C8C8C;
	
				}
	
				.datail-buttom-packet-money {
					width: 150rpx;
					height: 24rpx;
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 400;
					font-size: 24rpx;
					line-height: 24rpx;
					text-align: right;
					color: #8C8C8C;
					margin-top: -24rpx;
					margin-left: 520rpx;
				}
			}
	
	
		}
	
		.datail-buttom-total {
			height: 32rpx;
			width: 702rpx;
			margin-top: 30rpx;
			// background-color: #fafa5e;
			display: flex;
			// margin-left: 500rpx;
			margin-top: 350rpx;
			margin-left: -700rpx;
			margin-bottom: 50rpx;
	
			.datail-buttom-total-font {
				width: 80rpx;
				height: 30rpx;
				font-weight: 1000;
				font-size: 32rpx;
				line-height: 32rpx;
				color: #121B36;
				flex-grow: 0;
				margin-left: 400rpx;
			}
	
			.datail-buttom-total-num {
				width: 150rpx;
				height: 30rpx;
				font-weight: 1000;
				font-size: 32rpx;
				line-height: 32rpx;
				color: #121B36;
				flex-grow: 0;
				margin-left: 10rpx;
			}
		}
		
	
	}


	.contact{
		width: 702rpx;
		height: 96rpx;
		background: #FFF6F2;
		border-radius: 0px 0px 6px 6px;
		margin-left: 24rpx;
		display: flex;
		justify-content: space-around;
		.contact-online{
			width: 160rpx;
			height: 42rpx;
			display: flex;
			margin-top: 24rpx;
			.contact-online-img{
				width: 42rpx;
				height: 42rpx;
				image{
					width: 42rpx;
					height: 42rpx;
					background-size: 100%;
				}
			}
			.contact-online-font{
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 500;
				font-size: 24rpx;
				line-height: 42rpx;
				color: #000000;
			}
		}
		.contact-merchants{
			width: 160rpx;
			height: 42rpx;
			display: flex;
			margin-top: 24rpx;
			.contact-merchants-img{
				width: 42rpx;
				height: 42rpx;
				image{
					width: 42rpx;
					height: 42rpx;
					background-size: 100%;
				}
			}
			.contact-merchants-font{
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 500;
				font-size: 24rpx;
				line-height: 42rpx;
				color: #000000;
			}
		}
	}

	.order-information{
		width: 702rpx;
		height: 400rpx;
		background: #FFFFFF;
		box-shadow: 0px 4rpx 10rpx rgba(0, 0, 0, 0.06);
		border-radius: 12rpx;
		margin-top: 24rpx;
		margin-left: 24rpx;
		.order-information-font{
			width: 702rpx;
			height: 104rpx;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 1000;
			font-size: 32rpx;
			line-height: 104rpx;
			color: #000000;
			margin-left: 24rpx;
		}
		.order-information-detail{
			width: 654rpx;
			height: 288rpx;
			// background-color: #FA8C16;
			// position: fixed;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			margin-left: 24rpx ;
			.order-information-detail-kuang{
				width: 654rpx;
				height: 24rpx;
				display: flex;
				justify-content: space-between;
				.order-information-detail-font{
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 400;
					font-size: 24rpx;
					line-height: 24rpx;
					color: #121B36;
				}
				.order-information-detail-state{
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 400;
					font-size: 24rpx;
					line-height: 24rpx;
					text-align: right;
					color: #8C8C8C;

				}
			}
		}
	}

	.btntwo{
		width: 702rpx;
		height: 76rpx;
		border: 2rpx solid #FB7A42;
		border-radius: 12rpx;
		margin-top: 48rpx;
		margin-left: 24rpx;
		margin-bottom: 96rpx;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 800;
		font-size: 36rpx;
		line-height: 76rpx;
		text-align: center;
		color: #FB7A42;
	}

</style>
